<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猫叔的测试站 - 首页</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <div class="container">
            
            <div class="logo">                
                <img src="img/logo_white.png" alt="">
            </div>
            <label for="menucheck" class="menu-icon">
                <em></em>
                <em></em>
                <em></em>
            </label>
            <input type="checkbox" id="menucheck">
            <ul>
                <li class="actived"><a href="./index.html" taget="_self">首页</a></li>
                <li><a href="./case.html" taget="_self">最新案例</a></li>
                <li><a href="./about.html" taget="_self">关于我们</a></li>
                <li><a href="./concat.html" taget="_self">联系我们</a></li>
            </ul>
            <div class="clear"></div>
            
        </div>
    </header>
    <!-- <div id="header"></div> -->
    <div class="banner">
        <div class="main-text">
            <h1>
                独具匠心 专注品质
            </h1>
            <span>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, cumque obcaecati? Ad molestias, iusto, explicabo quasi est placeat tempore atque architecto fuga adipisci qui vel natus quod dicta provident dolorum.
            </span>
        </div>
    </div>

    <div class="container features">
        <div class="feature">
            <div class="center icon">
                <!-- 图标 -->
                <i class="fas fa-briefcase fa-5x"></i>
            </div>
            <div class="title-big">
                效果酷炫
            </div>
           
            <div class="title-small">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit provident, illo quo at non repellat id sunt unde minus commodi fuga voluptatum quibusdam eveniet fugit veniam veritatis earum porro fugiat in quasi sint voluptas magnam ipsam harum? Totam, rerum eos.
            </div>
        </div>

        <div class="feature">
            <div class="center icon">
                <!-- 图标 -->
                <i class="fas fa-archive fa-5x"></i>
            </div>
            <div class="title-big">
                效果酷炫
            </div>
           
            <div class="title-small">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit provident, illo quo at non repellat id sunt unde minus commodi fuga voluptatum quibusdam eveniet fugit veniam veritatis earum porro fugiat in quasi sint voluptas magnam ipsam harum? Totam, rerum eos.
            </div>
        </div>

        <div class="feature">
            <div class="center icon">
                <!-- 图标 -->
                <i class="fa fa-arrow-circle-right fa-5x" aria-hidden="true"></i>
            </div>
            <div class="title-big">
                效果酷炫
            </div>
           
            <div class="title-small">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit provident, illo quo at non repellat id sunt unde minus commodi fuga voluptatum quibusdam eveniet fugit veniam veritatis earum porro fugiat in quasi sint voluptas magnam ipsam harum? Totam, rerum eos.
            </div>
        </div>

        <div class="clear"></div>
    </div>

    <div class="container lists">
        <div class="title">
            与HTML为伴
        </div>
        <div class="pic-lists">
            <div class="pic-list">
                <img src="img/pic1.jpg" alt="">
                <div class="pic-title">
                    自由创意
                </div>
                <div class="pic-desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, odit!
                </div>
            </div>

            <div class="pic-list">
                <img src="img/pic2.jpg" alt="">
                <div class="pic-title">
                    自由创意
                </div>
                <div class="pic-desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, odit!
                </div>
            </div>

            <div class="pic-list">
                <img src="img/pic3.jpg" alt="">
                <div class="pic-title">
                    自由创意
                </div>
                <div class="pic-desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, odit!
                </div>
            </div>

            <div class="pic-list">
                <img src="img/pic4.jpg" alt="">
                <div class="pic-title">
                    自由创意
                </div>
                <div class="pic-desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, odit!
                </div>
            </div>

            <div class="pic-list">
                <img src="img/pic2.jpg" alt="">
                <div class="pic-title">
                    自由创意
                </div>
                <div class="pic-desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, odit!
                </div>
            </div>

            <div class="pic-list">
                <img src="img/pic3.jpg" alt="">
                <div class="pic-title">
                    自由创意
                </div>
                <div class="pic-desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, odit!
                </div>
            </div>

            <div class="pic-list">
                <img src="img/pic4.jpg" alt="">
                <div class="pic-title">
                    自由创意
                </div>
                <div class="pic-desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, odit!
                </div>
            </div>

            <div class="pic-list">
                <img src="img/pic1.jpg" alt="">
                <div class="pic-title">
                    自由创意
                </div>
                <div class="pic-desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, odit!
                </div>
            </div>

            <div class="clear"></div>
        </div>
    </div>

    <div class="concat">
        <div class="container">

            <div class="title">
                联系我们
            </div>
            <div>
                <!-- 二维码 -->
                <div class="qrcode">
                    <img src="img/qrcode.jpg" alt="公众号二维码" width="120">
                    <div class="center">
                        关注公众号
                    </div>
                </div>
                <div class="qrcode">
                    <img src="img/qrcode.jpg" alt="App二维码" width="120">
                    <div class="center">
                        下载app
                    </div>
                </div>
                <div class="info-box">
                    <div class="line">
                        <span class="title-small">
                            QQ:
                        </span>
                        <span class="info">
                            2222xxxx22
                        </span>
                    </div>

                    <div class="line">
                        <span class="title-small">
                            邮箱:
                        </span>
                        <span class="info">
                            xxxx@qq.com
                        </span>
                    </div>

                    <div class="line">
                        <span class="title-small">
                            微博:
                        </span>
                        <span class="info">
                            xxxx
                        </span>
                    </div>

                    <div class="line">
                        <span class="title-small">
                          地址:
                        </span>
                        <span class="info">
                            山东省青岛市xx区xx路2号
                        </span>
                    </div>
                </div>

                <div class="phone">
                    <i class="fas fa-phone-alt fa-3x" ></i>
                    <span>
                        0537-88xxxxx88
                    </span>
                </div>

                <div class="clear"></div>
            </div>
        </div>
    </div>

    <footer class="center">
        Copyright &copy; 2024 XXXXXXXX公司版权所有
    </footer>
</body>
</html>